<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='WebUI/controls/fullcalendar-2.7.3/lib/cupertino/jquery-ui.min.css' />
    <link href='WebUI/controls/fullcalendar-2.7.3/fullcalendar.css' rel='stylesheet' />
    <link href='WebUI/controls/fullcalendar-2.7.3/fullcalendar.print.css' rel='stylesheet' media='print' />
    <script src='WebUI/controls/fullcalendar-2.7.3/lib/moment.min.js'></script>
    <script src='WebUI/controls/fullcalendar-2.7.3/lib/jquery.min.js'></script>
    <script src='WebUI/controls/fullcalendar-2.7.3/fullcalendar.min.js'></script>
    <script src='WebUI/controls/fullcalendar-2.7.3/lang-all.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }

        #calendar {
            max-width: 900px;
            margin: 10px auto;
        }
        .fc th{ line-height: 30px;}
        .fc-event {
            border: 1px solid #ff9933; /* default BORDER color */
            background-color: #fac676;line-height: 22px; text-indent: 5px; /* default BACKGROUND color */
        }
        .fc-event, .fc-event:hover, .ui-widget .fc-event{ color: #ff9933}
        .fc-event.no{ border: 1px solid #bdbdbd; /* default BORDER color */
            background-color: #fff;}
        .fc-event.no, .fc-event.no:hover, .ui-widget.no .fc-event.no{ color: #bdbdbd}

        .fc-event.yes{ border: 1px solid #ff9933; /* default BORDER color */
            background-color: #fff;}
        .fc-event.yes, .fc-event.yes:hover, .ui-widget.yes .fc-event.yes{ color:#ff9933}

        .fc-title{ font-size:14px;line-height: 30px; font-weight: normal;}
        .fc-toolbar h2{ font-size:20px;}
    </style>

    <script>
        $(document).ready(function() {
            var currentLangCode = 'zh-cn';
            // build the language selector's options
            $.each($.fullCalendar.langs, function(langCode) {
                $('#lang-selector').append(
                        $('<option/>')
                                .attr('value', langCode)
                                .prop('selected', langCode == currentLangCode)
                                .text(langCode)
                );
            });

            // rerender the calendar when the selected option changes
            $('#lang-selector').on('change', function() {
                if (this.value) {
                    currentLangCode = this.value;
                    $('#calendar').fullCalendar('destroy');
                    renderCalendar();
                }
            });

            function renderCalendar() {
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    defaultDate: '2016-05-12',
                    lang: currentLangCode,
                    buttonIcons: false, // show the prev/next text
                    weekNumbers: true,
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: [
                        {
                            title: 'All Day Event',
                            start: '2016-05-01'
                        },
                        {
                            title: 'Long Event',
                            start: '2016-05-07',
                            end: '2016-05-10'
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: '2016-05-09T16:00:00'
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: '2016-05-16T16:00:00'
                        },
                        {
                            title: 'Conference',
                            start: '2016-05-11',
                            end: '2016-05-13'
                        },
                        {
                            title: 'Meeting',
                            start: '2016-05-12T10:30:00',
                            end: '2016-05-12T12:30:00'
                        },
                        {
                            title: 'Lunch',
                            start: '2016-05-12T12:00:00'
                        },
                        {
                            title: 'Meeting',
                            start: '2016-05-12T14:30:00'
                        },
                        {
                            title: 'Happy Hour',
                            start: '2016-05-12T17:30:00'
                        },
                        {
                            title: 'Dinner',
                            start: '2016-05-12T20:00:00'
                        },
                        {
                            title: 'Birthday Party',
                            start: '2016-05-13T07:00:00'
                        },
                        {
                            title: 'Click for Google',
                            url: 'http://google.com/',
                            start: '2016-05-28'
                        }
                    ]
                });
            }

            renderCalendar();
        });

    </script>
</head>
<body>
<!--说明:
         三个状态调用样式:
            (1)可以选择:给 .fc-event添加.yes 的class样式
            (2)已选择:给 不添加样式
            (3)不可选择:给 .fc-event添加.no 的class样式
                        -->
<div id='calendar'></div>

</body>
</html>
